<template>
  <!--pages/spell_group/index.wxml-->
  <view class="index_warp">
    <view class="image_warp">
      <image src="@/static/images/Spell_group.png" />
    </view>
    <view class="title"> 限时拼团 </view>
    <view class="content">
      <view
        class="item"
        v-for="item in GroupCourseList"
        :key="item.id"
        @click="clickItem(item.id)"
      >
        <view class="left">
          <view class="teacher_img">
            <image src="@/static/images/teacher.png" />
          </view>
          <view class="teach_name hid1">
            {{ item.teacherName }}
          </view>
        </view>
        <view class="right">
          <view class="right_title hid1">
            {{ item.name }}
          </view>
          <view class="right_time_warp">
            {{ item.createTime }} ·
            <text>{{ item.playCount }}</text>
            人观看
          </view>
          <view class="right_price flex_b">
            <view class="" />
            <view class="r"> {{ item.groupGold }}积分拼团 </view>
          </view>
          <view class="residue_time flex_b">
            <view />
            <view class="flex"> </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { coursePackageList } from "@/api/course";
export default {
  data() {
    return {
      pageNumber: 1, //分页的页数
      pageSize: 20,
      hasMore: true,
      GroupCourseList: [],
    };
  },
  computed: {
    // user: function () {
    //   return this.$store.state.user.user;
    // },
  },
  onLoad: function (options) {
    this.getGroupCourse();
  },
  onReachBottom: function () {
    let hasMore = this.hasMore;
    if (!hasMore) {
      this.$ShowToast({
        title: "没有更多了",
        mask: false,
      });
      return;
    }
    this.getGroupCourse();
  },
  methods: {
    // 倒计时为0
    surplusTimeEnd(e) {
      const { id } = e.currentTarget.dataset;
      console.log(id);
      let GroupCourseList = this.GroupCourseList;
      GroupCourseList.forEach((v) => {
        if (v.id == id) {
          v.surplusTime = 0;
          this.setData({
            GroupCourseList,
          });
        }
      });
    },

    // 点击列表项
    clickItem(id) {
      console.log(id);
      this.$u.route("/pages/course-detail/course-detail", {
        id,
      });
    },
    // 获取拼团列表
    getGroupCourse() {
      coursePackageList({
        pageNum: this.pageNumber,
        pageSize: this.pageSize,
        type: 6,
      }).then((res) => {
        let GroupCourseList = this.GroupCourseList;
        this.pageNumber = this.pageNumber + 1;
        this.GroupCourseList = [...GroupCourseList, ...res.list];
        if (res.list.length < this.pageSize) {
          this.hasMore = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  padding: 20upx 30upx;

  .image_warp {
    width: 690upx;
    height: 240upx;
    border-radius: 30upx;
    overflow: hidden;
  }

  .title {
    height: 50upx;
    font-size: 36upx;
    font-weight: 800;
    line-height: 50upx;
    margin: 30upx 0;
  }

  .content {
    .item {
      margin-bottom: 20upx;
      height: 220upx;
      background: #ffffff;
      box-shadow: 0px 4upx 6upx #f0f2f5;
      border-radius: 10upx;
      display: flex;
      justify-content: space-between;
      padding: 40upx;

      .left {
        flex-shrink: 0;
        height: 100%;
        width: 80upx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .left_type {
          width: 80upx;
          height: 30upx;
          background: #13c2c2;
          color: #fff;
          font-size: 20upx;
        }

        .teacher_img {
          width: 80upx;
          height: 80upx;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
        }

        .teach_name {
          max-width: 130upx;
          height: 34upx;
          font-size: 24upx;
          font-weight: 500;
          line-height: 34upx;
          color: #666666;
        }
      }

      .right {
        margin-left: 30upx;
        flex: 1;

        .right_title {
          max-width: 500.4upx;
          height: 42upx;
          font-size: 30upx;
          font-weight: bold;
          line-height: 42upx;
        }

        .right_time_warp {
          margin-top: 14upx;
          height: 32upx;
          font-size: 22upx;
          font-weight: 500;
          line-height: 32upx;
          color: #666666;

          text {
            color: #0058a3;
            font-size: 22upx;
          }
        }

        .right_price {
          .r {
            height: 50upx;
            font-size: 36upx;
            font-weight: 800;
            line-height: 50upx;
            color: #ff3b30;

            text {
              margin-right: -12upx;
              color: #ff3b30;
            }
          }
        }

        .residue_time {
          margin-top: 10upx;
          height: 34upx;
          font-size: 24upx;
          font-weight: 500;
          line-height: 34upx;
          color: #666666;

          .van-count-down {
            color: #666666;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
